<template>
  <Card id="fixedCostTree">
    <a-button :disabled="addDisabled" icon="plus-circle" type="primary" @click="addChild">增加子节点</a-button>
    <a-button :disabled="editDisabled" type="danger" @click="showModal">编辑</a-button>
    <a-modal v-model="addModal" title="增加子节点">
      <a-input v-model="addTitle" clear placeholder="请输入名称"/>
      <template slot="footer">
        <a-button key="back" @click="handleAdd">取消</a-button>
        <a-button key="submit" :loading="addLoading" type="primary" @click="handleAddOk">保存</a-button>
      </template>
    </a-modal>
    <a-modal v-model="editModal" title="修改名称">
      <a-input v-model="editTitle" clear placeholder="请输入名称"/>
      <template slot="footer">
        <a-button key="back" @click="handleEdit">取消</a-button>
        <a-button key="submit" :loading="editLoading" type="primary" @click="handleEditOk">保存</a-button>
      </template>
    </a-modal>
    <a-divider/>
    <a-spin :spinning="spinning" tip="加载中...">
      <a-tree
        :default-expand-all="defaultExpandAll"
        :show-line="showLine"
        :tree-data="gData"
        class="draggable-tree"
        draggable
        @dragend="onDragEnd"
        @drop="onDrop"
        @select="onSelect"
      >
      </a-tree>
    </a-spin>
  </Card>
</template>

<script>
import {addFixedCostTree, editFixedCostTree, fixedCostTree, updateFixedCostTree} from '../../api/fixedCost'

export default {
  data() {
    return {
      defaultExpandAll: true,
      addModal: false,
      editModal: false,
      addDisabled: true,
      editDisabled: true,
      editLoading: false,
      addLoading: false,
      gData: [],
      showLine: true,
      addTitle: '',
      editTitle: '',
      editNode: null,
      spinning: false,
      addParentNode: ''
    }
  },
  methods: {
    onDrop(info) {
      const dropKey = info.node.eventKey
      const dragKey = info.dragNode.eventKey
      const dropPos = info.node.pos.split('-')
      const dropPosition =
        info.dropPosition - Number(dropPos[dropPos.length - 1])
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr)
          }
          if (item.children) {
            return loop(item.children, key, callback)
          }
        })
      }
      const data = [...this.gData]

      // Find dragObject
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, item => {
          item.children = item.children || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj)
        })
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, item => {
          item.children = item.children || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.unshift(dragObj)
        })
      } else {
        let ar
        let i
        loop(data, dropKey, (item, index, arr) => {
          ar = arr
          i = index
        })
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj)
        } else {
          ar.splice(i + 1, 0, dragObj)
        }
      }
      this.gData = data
    },
    onDragEnd() {
      this.spinning = true
      updateFixedCostTree({data: this.gData}).then(res => {
        if (res.data) {
          this.$message.success('排序成功')
        }
        this.init()
      })
    },
    onSelect(node, e) {
      this.addDisabled = this.editDisabled = !e.selected
      this.editTitle = e.node.title
      this.editNode = e.node.eventKey
      this.addParentNode = e.node.eventKey
    },
    showModal() {
      this.editLoading = false
      this.editModal = true
    },
    addChild() {
      this.addLoading = false
      this.addModal = true
      this.addTitle = ''
    },
    handleEdit() {
      this.editTitle = ''
      this.editModal = false
    },
    handleAdd() {
      this.addTitle = ''
      this.addModal = false
    },
    handleEditOk() {
      this.editLoading = true
      editFixedCostTree({key: this.editNode, title: this.editTitle}).then(
        res => {
          this.editLoading = false
          this.editModal = false
          if (res.data) {
            this.$message.success('修改成功')
            this.init()
          } else {
            this.$message.error('修改失败')
          }
        }
      )
    },
    handleAddOk() {
      this.addLoading = true
      addFixedCostTree({
        parentKey: this.addParentNode,
        title: this.addTitle
      }).then(res => {
        this.addLoading = false
        this.addModal = false
        if (res.data) {
          this.$message.success('修改成功')
          this.init()
        } else {
          this.$message.error('修改失败')
        }
      })
    },
    init() {
      this.spinning = true
      fixedCostTree().then(res => {
        this.defaultExpandAll = true
        this.gData = res.data
        this.spinning = false
      })
    }
  },
  created() {
    this.init()
  }
}
</script>
